<template>
  <div class="home">
    <!-- 定义页面的解构 -->
    <!-- 顶部导航栏 -->
    <div class="header">
      <p>易洁家政</p>
    </div>
    <!-- 顶部轮播区域 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swipe in swipeData" :key="swipe.id">
          <img :src="swipe.url" alt="寄" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 菜单栏 -->
    <div class="menu">
      <van-grid :column-num="4" icon-size="50px" :border="false" :gutter="10">
        <van-grid-item
          v-for="(category,index) in categoryData"
          :key="category.id"
          :icon="category.icon"
          :text="category.name"
          @click="jumpPS(category.id, index)"
        />
      </van-grid>
    </div>
    <!-- 底部产品展示区域 -->
    <div class="product">
      <van-card
        v-for="product in productData"
        :key="product.id"
        :price="product.price + '.00'"
        :desc="product.description"
        :title="product.name"
        :thumb="product.photo"
      />
    </div>
    <div style="height: 80px"></div>
  </div>
</template>

<script>
// 引入axios
import { get } from '@/http/axios'
// 引入vuex的辅助函数
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      // 轮播图数组
      swipeData: []
    }
  },
  computed: {
    // 引入栏目数据
    ...mapState('category', ['categoryData']),
    ...mapState('product', ['productData']),
  },
  methods: {
    // 引入category vuex中的方法
    ...mapActions('category', ['getAllCategoryData']),
    // 引入peoduct vuex中的方法
    ...mapActions('product', ['getAllProductData']),
    // 获取所有轮播图的数据
    async getAllSwipeData() {
      let res = await get('/carousel/query', { status: '正常' })
      // 将拿到的数据赋值给轮播图数组
      this.swipeData = res.data.data
    },
    // 查询栏目数据
    queryCategory() {
      let data = {
        page: 1,
        pageSize: 10
      }
      // 调用vuex中的方法 传参
      this.getAllCategoryData(data)
    },
    // 获取产品数据
    queryProduct() {
      let data = {
        page: 1,
        pageSize: 100
      }
      this.getAllProductData(data)
    },
    jumpPS(categoryId, activeKey) {
      this.$router.push({
        path: "ProductServe",
        query: { categoryId, activeKey }
      })
    },

  },
  created() {
    // 自动获取轮播图的数据
    this.getAllSwipeData()
    // 自动获取栏目数据
    this.queryCategory()
    // 自动获取产品数据
    this.queryProduct()
  },
};
</script>

<style scoped>
.header {
  height: 200px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  font-size: 29px;
  font-family: 黑体;
  color: #fff;
  text-align: center;
  padding-top: 5px;
  font-weight: 500;
}
.header p {
  margin-top: 8px;
}
.swipe {
  width: 90%;
  height: 160px;
  position: absolute;
  top: 136px;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px 0 #aaa;
  border-radius: 8px;
}
/* 设置轮播区域样式 */
.my-swipe,
.my-swipe img {
  width: 100%;
  height: 200px;
}
.menu {
  margin-top: 80px;
}
</style>